<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getParagrapgPronunciation ,updateParagraphImage} from '../api/paragraph'

const route = useRoute()
const router = useRouter()

const article = ref({
  id: '',
  title: ''
})

const paragraphs = ref([])

const enlargedImage = ref(null) // To store the URL of the image to be enlarged
const isImageDialogVisible = ref(false) // To control the visibility of the image dialog

const handleImageClick = (imageUrl) => {
  enlargedImage.value = imageUrl
  isImageDialogVisible.value = true
}

const loadArticle = async () => {
  try {
    const id = route.query.id
    if (!id) {
      ElMessage.error('文章ID不能为空')
      router.push('/')
      return
    }

    const res = await getParagrapgPronunciation(id)
    if (res.data && res.data.list) {
      article.value.id = id
      article.value.title = `文章 ${id}` // Set a default title
      paragraphs.value = res.data.list.map(item => ({
        id: item.id,
        paragraphOrder: item.paragraphOrder,
        content: item.content,
        imageUrl: item.imageUrl || ''
      }))
    }
  } catch (error) {
    console.error('加载文章失败：', error)
    ElMessage.error('加载文章失败')
  }
}

const handleImageUpload = async (file, paragraph) => {
  try {
    const formData = new FormData()
    formData.append('file', file)
    formData.append('paragraphId', paragraph.id)

    const res = await updateParagraphImage(formData)
    paragraph.imageUrl = res.data.imageUrl
    loadArticle()
    ElMessage.success('图片上传成功')
  } catch (error) {
    console.error('图片上传失败：', error)
    ElMessage.error('图片上传失败')
  }
}

const goBack = () => {
  router.push('/')
}

onMounted(() => {
  loadArticle()
})
</script>

<template>
  <div class="image-edit">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>图片编辑 - {{ article.title }}</span>
          <el-button type="primary" link @click="goBack">返回列表</el-button>
        </div>
      </template>

      <div class="paragraphs-container">
        <div v-for="paragraph in paragraphs" :key="paragraph.id" class="paragraph-item">
          <div class="paragraph-header">
            <span class="paragraph-number">段落 {{ paragraph.paragraphOrder }}</span>
          </div>
          <div class="paragraph-content">
            <div class="text-content">
              <p>{{ paragraph.content }}</p>
              <el-upload
                class="upload-demo"
                action=""
                :http-request="({ file }) => handleImageUpload(file, paragraph)"
                :show-file-list="false"
              >
                <el-button type="primary">上传图片</el-button>
              </el-upload>
            </div>
            <div class="image-box" @click="handleImageClick(paragraph.imageUrl)" v-if="paragraph.imageUrl">
              <img :src="paragraph.imageUrl" alt="段落图片" class="image-preview" />
            </div>
            <div v-else class="image-placeholder">暂无图片</div>
          </div>
        </div>
      </div>
    </el-card>

    <!-- Image Dialog -->
    <el-dialog v-model="isImageDialogVisible" width="50%" :close-on-click-modal="true">
      <img :src="enlargedImage" alt="放大的图片" class="enlarged-image" />
    </el-dialog>
  </div>
</template>

<style scoped>
.image-edit {
  height: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.paragraphs-container {
  margin-top: 20px;
}

.paragraph-item {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
}

.paragraph-header {
  margin-bottom: 15px;
}

.paragraph-content {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.text-content {
  flex: 1;
}

.image-box {
  width: 100px;
  height: 100px;
  border: 1px solid #ddd;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
  cursor: pointer;
}

.image-preview {
  max-width: 100%;
  max-height: 100%;
  border-radius: 4px;
}

.image-placeholder {
  color: #999;
  font-size: 12px;
  text-align: center;
}

.enlarged-image {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
</style>
